import React from 'react'
import { Modal, Checkbox, message, Button } from 'antd'
import PropTypes from 'prop-types'
import { LoadingOutlined } from '@ant-design/icons'
import _ from 'loadsh'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import style from './SelectSecretary.module.less'

class SelectSecretary extends Component {
  state = {
    current: null,
    causeaction: true,
    party: true,
    loading: false,
    list: [],
    withdrawVisible: false
  }

  handleOk () {
    if (!this.state.current) {
      return message.warning('请选择秘书')
    }
    this.props.hide()
    this.props.changeSecretary(_.cloneDeep(this.state.current))
  }

  handleCancel () {
    this.setState({
      list: [],
      current: null
    })
    this.props.hide()
  }

  empty () {
    this.props.hide()
    this.props.changeSecretary({ employee: '', processerid: '' })
  }

  getList () {
    const { causeaction, party } = this.state
    this.setState({
      loading: true
    })
    this.$get('/api/xapc/employeecase', {
      caseid: this.props.caseid,
      causeaction: causeaction ? 1 : 0,
      party: party ? 1 : 0
    }).then(res => {
      this.setState({ loading: false })
      if (res.status === 1) {
        this.setState({
          list: _.uniqBy(res.data, 'employeeid'),
          withdrawVisible: res.data.some(li => li.withdraw)
        }, () => {
          this.setCurrentById(this.props.value)
        })
      } else {
        message.warning(res.message)
      }
    }).catch(() => { this.setState({ loading: false }) })
  }

  // 根据id设置当前秘书
  setCurrentById (id) {
    this.state.list.forEach(li => {
      if (li.employeeid === id) {
        this.setState({
          current: li
        })
      }
    })
  }

  // 勾选相同主体
  changeparty (v) {
    this.setState({ party: v.target.checked }, () => {
      this.getList()
    })
  }

  // 勾选相同案由
  changecauseaction (v) {
    this.setState({ causeaction: v.target.checked }, () => {
      this.getList()
    })
  }

  componentDidUpdate (prev) {
    if (prev.value !== this.props.value) {
      this.setCurrentById(this.props.value)
    }
    if (this.props.visible && prev.visible !== this.props.visible) {
      this.getList()
    }
  }

  componentDidMount () {
    this.setCurrentById(this.props.value)
    if (this.props.visible) {
      this.getList()
    }
  }

  // 渲染秘书列表
  renderSecretaryList () {
    return this.state.list.map(li => {
      let className = style['s-tr']
      if (this.state.current && li.employeeid === this.state.current.employeeid) {
        className = `${className} ${style.active}`
      }
      return (
        <div key={li.employeeid} className={className} onClick={() => this.setState({ current: li })}>
          <div className={style['s-td']}>{li.employee}</div>
          <div className={style['s-td']}>{li.caseon}</div>
          <div className={style['s-td']}>{li.caseing}</div>
          <div className={style['s-td']}>{li.caselike}</div>
          {this.state.withdrawVisible ? <div className={style['s-td']}>{li.withdraw}</div> : null}
        </div>
      )
    })
  }

  renderFooter () {
    return (
      <div className={style.footer}>
        <Button onClick={() => this.empty()}>清空选择</Button>
        <Button onClick={() => this.handleCancel()}>取消</Button>
        <Button type='primary' onClick={() => this.handleOk()}>确定</Button>
      </div>
    )
  }

  render () {
    const tableClass = [style['secretary-box']]
    if (!this.state.withdrawVisible) {
      tableClass.push(style['no-withdraw'])
    }
    return (
      <Modal
        title='选择秘书'
        width={800}
        maskClosable={false}
        open={this.props.visible}
        onCancel={() => this.handleCancel()}
        footer={this.renderFooter()}
      >
        <div className={style['list-box']}>
          {
            this.state.loading ? (
              <div className={style.loading}>
                <LoadingOutlined />
              </div>
            ) : null
          }
          <div className={style['header-line']}>
            <span className={style['header-line-title']}>全部秘书</span>
            <span className={style['header-checkboxs']}>
              <Checkbox checked={this.state.party} onChange={v => this.changeparty(v)}>同主体</Checkbox>
              <Checkbox checked={this.state.causeaction} onChange={v => this.changecauseaction(v)}>同案由</Checkbox>
            </span>
          </div>
          <div className={tableClass.join(' ')}>
            <div className={style['s-h-tr']}>
              <div className={style['s-th']}>秘书</div>
              <div className={style['s-th']}>今年分配</div>
              <div className={style['s-th']}>在办案件</div>
              <div className={style['s-th']}>类案数</div>
              {this.state.withdrawVisible ? <div className={style['s-th']}>回避情况</div> : null}
            </div>
            {this.renderSecretaryList()}
          </div>
        </div>

      </Modal>
    )
  }
}

SelectSecretary.propTypes = {
  visible: PropTypes.bool,
  value: PropTypes.string,
  caseid: PropTypes.string,
  hide: PropTypes.func,
  changeSecretary: PropTypes.func
}

SelectSecretary.defaultProps = {
  caseid: '',
  visible: false,
  value: '',
  hide: () => {},
  changeSecretary: () => {}
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(SelectSecretary)
